<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js">
var $ = require(&#39;jquery&#39;),
  BUI = require(&#39;bui-common&#39;),
  DATA_GROUP = &#39;data-group&#39;,
  PREFIX = BUI.prefix,
  CLS_GROUP = PREFIX + &#39;grid-row-group&#39;,
  CLS_TRIGGER = PREFIX + &#39;grid-cascade&#39;,
  CLS_EXPAND = PREFIX + &#39;grid-cascade-expand&#39;;

//新的分组
function newGroup (value,text) {
  return {items : [],value : value,text : text};
}

<span id='BUI-Grid-Plugins-RowGroup'>/**
</span> * 表头列分组功能，仅处理数据展示，排序，不处理这个过程中的增删改，添加删除列
 * @class BUI.Grid.Plugins.RowGroup
 * @extends BUI.Base
 */
var Group = function (cfg) {
  Group.superclass.constructor.call(this,cfg);
};

Group.ATTRS = {
 
  groups : {
    shared : false,
    value : []
  },
<span id='BUI-Grid-Plugins-RowGroup-property-renderer'>  /**
</span>   * 渲染分组内容，函数原型 function(text,group){}
   *
   *  - text 是分组字段格式化后的文本
   *  - group 是当前分组，包括,text(文本）,value（值）,items（分组包含的项）
   * @type {Function}
   */
  renderer : {

  }
};

BUI.extend(Group,BUI.Base);

BUI.augment(Group,{

  renderUI : function (grid) {
    var _self = this,
      tbodyEl = grid.get(&#39;el&#39;).find(&#39;tbody&#39;);
    _self.set(&#39;grid&#39;,grid);
    _self.set(&#39;tbodyEl&#39;,tbodyEl);

  },
  bindUI : function (grid) {
    var _self = this,
       groups = [];

    //显示完成记录时
    grid.on(&#39;aftershow&#39;,function () {
      var items = grid.getItems(),
        column = _self._getSortColumn();
      _self._clear();
      if(column){
        grid.get(&#39;view&#39;).getAllElements().hide();
        var field = column.get(&#39;dataIndex&#39;);
        BUI.each(items,function (item,index) {
          var last = groups[groups.length - 1],
            renderer = column.get(&#39;renderer&#39;),
            value = item[field],
            text;
          if(!last || value != last.value){
            text = renderer ? renderer(value,item) : value;
            var current = newGroup(value,text);
            current.begin = index;
            groups.push(current);
            last &amp;&amp; _self._createGroup(last);
            last = current;
          }
          
          last.items.push(item);
          
          
        });
        var last = groups[groups.length - 1];
        last &amp;&amp; _self._createGroup(last);
        _self.set(&#39;groups&#39;,groups);
      }
      
    });

    //清除所有记录时
    grid.on(&#39;clear&#39;,function () {
      _self._clear();
    });

    _self.get(&#39;tbodyEl&#39;).delegate(&#39;.&#39; + CLS_TRIGGER,&#39;click&#39;,function (ev) {
      var sender = $(ev.currentTarget),
        group = _self._getGroupData(sender);
      if(sender.hasClass(CLS_EXPAND)){
        _self._collapse(group);
        sender.removeClass(CLS_EXPAND);
      }else{
        _self._expand(group);
        sender.addClass(CLS_EXPAND);
      }

    });
  },
  //获取排序的字段对应的列
  _getSortColumn: function(){
    var _self = this,
      grid = _self.get(&#39;grid&#39;),
      store = grid.get(&#39;store&#39;),
      field = store.get(&#39;sortField&#39;);

    return grid.findColumnByField(field);
  },
  //获取分组的数据
  _getGroupData : function (el) {
    var _self = this,
      groupEl = el.closest(&#39;.&#39; + CLS_GROUP);
    return groupEl.data(DATA_GROUP);
  },
  _createGroup : function (group) {
    var _self = this,
      grid = _self.get(&#39;grid&#39;),
      item = group.items[0],
      firstEl = grid.findElement(item),
      count = grid.get(&#39;columns&#39;).length,
      renderer = _self.get(&#39;renderer&#39;),
      text = renderer ? renderer(group.text,group) : group.text,
      tpl = &#39;&lt;tr class=&quot;&#39;+CLS_GROUP+&#39;&quot;&gt;&lt;td colspan=&quot;&#39; + (count + 1) + &#39;&quot;&gt;&lt;div class=&quot;bui-grid-cell-inner&quot;&gt;&lt;span class=&quot;bui-grid-cell-text&quot;&gt;&lt;span class=&quot;bui-grid-cascade&quot;&gt;&lt;i class=&quot;bui-grid-cascade-icon&quot;&gt;&lt;/i&gt;&lt;/span&gt; &#39; + text + &#39;&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&#39;,
      node = $(tpl).insertBefore(firstEl);
    node.data(DATA_GROUP,group);
  },
  _getGroupedElements : function(group){
    var _self = this,
      grid = _self.get(&#39;grid&#39;),
      elements = grid.get(&#39;view&#39;).getAllElements(),
      begin = group.begin,
      end = group.items.length + begin,
      rst = [];
    for(var i = begin; i &lt; end; i++){
      rst.push(elements[i]);
    }
    return $(rst);
  },
  _expand : function (group) {
    var _self = this,
      subEls = _self._getGroupedElements(group);
    subEls.show();
  },
  _collapse : function (group) {
     var _self = this,
      subEls = _self._getGroupedElements(group);
    subEls.hide();
  },
  _clear : function () {
    var _self = this,
      groups = _self.get(&#39;groups&#39;),
      tbodyEl = _self.get(&#39;tbodyEl&#39;);

    BUI.Array.empty(groups);
    tbodyEl.find(&#39;.&#39; + CLS_GROUP).remove();

  }
});

module.exports = Group;
</pre>
</body>
</html>
